.vertify-frameset {
  width: 100%;
  // height: 100vh;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: black;
  background-image: url(https://s1.ax1x.com/2020/10/06/0NN0kF.png), url(https://github.com//images/modules/site/heroes/simple-codelines.svg);
  background-repeat: no-repeat;
  background-size: 20rem, cover;
  background-position: -5% 120%, center;

  // 主要容器
  .container {
    flex-wrap: nowrap;

    //左边装饰
    .left-side {
      padding: 0 0.5rem;
      max-width: 20rem;
      color: white;
      margin-right: 10vw;
      h1 {
        margin-top: 0;
        font-size: 2rem;
        font-weight: lighter;
        margin-bottom: 0.5rem;
      }
      .h1-att {
        color: #6a6a6a;
        font-size: 1.125rem;
        font-weight: bolder;
        text-transform: capitalize;
        margin-bottom: 1rem;
      }
    }
    //左边装饰

    // 右边表单
    .right-side {
      padding: 1rem;
      border-radius: 5px;
      background-color: white;
      //表单盒子
      .input-box {
        position: relative;
        margin-bottom: 0.75rem;
        .input-att {
          color: black;
          margin-bottom: 0.25rem;
        }

        //input 的盒子
        .input {
          position: relative;
          // 输入框
          input {
            width: 20rem;
            text-indent: 0.25rem;
            line-height: 2.5rem;
            font-size: 1.25rem;
            border-radius: 5px;
          }
          .code-att {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            outline: none;
          }
        }
        //input 的盒子 结尾
        
      }

      // 表单的提示
      .from-att {
        a {
          font-size: 0.8rem;
          color: #6a6a6a;
        }
      }
      .from-att:nth-last-child(1) {
        text-align: center;
      }

      //提交按钮
      .submit {
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        padding: 0.75rem 10%;
        background-color: #ff4545;
        color: white;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;

        &:hover, &:active {
          background-color: red;
        }
      }
    }
    // 右边表单 结尾

  }
  // 主要容器 结尾


  //tip 弹窗
  .tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 0.25rem;
    box-shadow: 0 0 5px 0 #6a6a6a;
    background-color: #ff4545;
    color: white;

    padding: 1rem;
    .title {
      font-weight: lighter;
      font-size: 2rem;
      text-transform: uppercase;
    }

    .tip-text {
      margin: 1rem 0;
      span {
        text-transform: capitalize;
      }
    }

    .warning-note {
      min-width: 20rem;
      max-width: 25rem;
      .warning-title {
        margin: 0.25rem 0 0.5rem;
        font-weight: lighter;
        color: black;
      }
      .hint-box {
        .hint {
          color: #f5f5f5;
          font-size: 0.75rem;
          margin: 0.25rem 0;
        }
      }



      .close-pop-up {
        margin-top: 1rem;
        box-sizing: border-box;
        width: 6rem;
        margin: 1rem auto 0;
        padding: 0.25rem;
        cursor: pointer;
        text-align: center;
        text-transform: uppercase;
        font-weight: lighter;
        border-radius: 1rem;
        box-shadow: 0 0 0px 0 white;
        border: 1.5px solid white;

        transition: all 0.125s;
        &:hover {
          background-color: white;
          color: black;
          box-shadow: 0 0 2.5px 0 #cacaca;
        }
      }
    }
  }
  //tip 弹窗 结尾
}

@media(max-width: 780px) {
  .vertify-frameset {
    background-image: url(https://images.unsplash.com/photo-1601922510016-656f24258a8d);
    background-size: cover;
    background-position: center;
    .container {
      flex-direction: column;
      .left-side {
        margin-bottom: 2rem;

        .warning-note {
          display: none;
        }
      }
      .right-side {
        //表单盒子
        .input-box {
          // 输入框
          .input {
            input {
              width: 100%;
              line-height: 2.5rem;
              font-size: 1.25rem;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}

@media(max-width: 578px) {
  .vertify-frameset {
    background-image: url(https://s1.ax1x.com/2020/10/06/0UhrW9.jpg);
  }
}